Jassif Team Institution

குறியீட்டு தரம்

நிலையான குறியீட்டு தரம் மற்றும் பாணி Node.js திட்டங்களுக்கு முக்கியமானது, குறிப்பாக குழு சூழல்களில்.

இது உதவுகிறது:

ESLint: JavaScript/TypeScript லிண்டிங்

ESLint மிகவும் பிரபலமான JavaScript/TypeScript லிண்டிங் கருவியாகும், இது உங்கள் குறியீட்டில் காணப்படும் வடிவங்களை அடையாளம் கண்டு அறிக்கை செய்ய உதவுகிறது. இது மிகவும் கட்டமைக்கக்கூடியது மற்றும் ஆதரிக்கிறது:

• தனிப்பயன் விதிகள் மற்றும் கட்டமைப்புகள்
• @typescript-eslint/parser மூலம் TypeScript ஆதரவு
• கட்டமைப்பு-குறிப்பிட்ட விதிகளுக்கான பிளக்கின் சூழல்
• பொதுவான பிரச்சினைகளின் தானியங்கி திருத்தம்

நிறுவல்

npm install --save-dev eslint

விரிவான ESLint கட்டமைப்பு

TypeScript ஆதரவுடன் கூடிய Node.js திட்டத்திற்கான மிகவும் முழுமையான .eslintrc.json கட்டமைப்பு இங்கே:

{
  "env": {
    "node": true,
    "es2021": true,
    "browser": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "indent": ["error", 2],
    "no-console": "warn",
    "no-unused-vars": "warn"
  }
}

மேம்பட்ட ESLint பயன்பாடு

அடிப்படை லிண்டிங்கைத் தவிர, ESLint குறியீட்டு தரத்தை பராமரிக்க சக்திவாய்ந்த அம்சங்களை வழங்குகிறது:

பொதுவான கட்டளைகள்

# Lint all JavaScript/TypeScript files
npx eslint .

# Fix auto-fixable issues
npx eslint --fix .

# Lint specific file
npx eslint src/index.js

Prettier: குறியீடு ஃபார்மேட்டர்

Prettier என்பது ஒரு கருத்தியல் குறியீடு ஃபார்மேட்டர் ஆகும், இது உங்கள் குறியீட்டை பாகுபடுத்தி அதன் சொந்த விதிகளுடன் மீண்டும் அச்சிடுவதன் மூலம் ஒரு நிலையான பாணியை செயல்படுத்துகிறது. இது ஆதரிக்கிறது:

• JavaScript, TypeScript, JSX, CSS, SCSS, JSON, மற்றும் பல
• குறைந்தபட்ச கட்டமைப்புடன் கருத்தியல் இயல்புநிலைகள்
• ESLint மற்றும் பிற கருவிகளுடன் ஒருங்கிணைப்பு
• எடிட்டர் ஒருங்கிணைப்பிற்கான ஆதரவு

நிறுவல்

npm install --save-dev --save-exact prettier

விரிவான Prettier கட்டமைப்பு

பொதுவான விருப்பங்களுடன் கூடிய நன்கு ஆவணப்படுத்தப்பட்ட .prettierrc கட்டமைப்பு இங்கே:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

மேம்பட்ட Prettier பயன்பாடு

Prettier உங்கள் பணிப்பாய்வில் பல்வேறு வழிகளில் தனிப்பயனாக்கப்பட்டு ஒருங்கிணைக்கப்படலாம்:

பொதுவான கட்டளைகள்

# Format all files
npx prettier --write .

# Check formatting without making changes
npx prettier --check .

# Format specific file
npx prettier --write src/index.js

தொந்தரவில்லாத ESLint + Prettier ஒருங்கிணைப்பு

ESLint மற்றும் Prettier க்கு இடையேயான மோதல்களைத் தவிர்க்க, சரியான ஒருங்கிணைப்பை அமைக்கவும்:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

பின்னர் உங்கள் ESLint கட்டமைப்பைப் புதுப்பிக்கவும்:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}

மேம்பட்ட எடிட்டர் ஒருங்கிணைப்பு

VS Code: அல்டிமேட் அமைப்பு

VS Code இல் சிறந்த வளர்ச்சி அனுபவத்திற்கு, இந்த படிகளைப் பின்பற்றவும்:

பின்வரும் நீட்டிப்புகளை நிறுவவும்:

• ESLint
• Prettier - Code formatter
• EditorConfig for VS Code
• Error Lens (for inline error highlighting)

உங்கள் VS Code settings.json ஐ கட்டமைக்கவும்:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "prettier.requireConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

பிற எடிட்டர் அமைப்புகள்

பிற பிரபலமான எடிட்டர்களுக்கான அமைப்பு வழிமுறைகள் இங்கே:

• WebStorm/IntelliJ: ESLint மற்றும் Prettier க்கான உள்ளமைக்கப்பட்ட ஆதரவு
• Atom: linter-eslint மற்றும் prettier-atom தொகுப்புகளை நிறுவவும்
• Sublime Text: SublimeLinter மற்றும் SublimeLinter-eslint ஐ நிறுவவும்

Husky & lint-staged உடன் Git Hooks

உங்கள் குறியீட்டை கமிட் செய்வதற்கு முன் தானாகவே வடிவமைத்து லிண்ட் செய்யும் ப்ரீ-கமிட் ஹுக்குகளை அமைப்பதன் மூலம் மோசமான குறியீட்டை கமிட் செய்வதைத் தடுக்கவும்:

கமிட்களுக்கு முன் குறியீட்டு தரத்தை உறுதி செய்ய ப்ரீ-கமிட் ஹுக்குகளை அமைக்கவும்:

நிறுவல்

npm install --save-dev husky lint-staged

கட்டமைப்பு (package.json)

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml}": [
      "prettier --write"
    ]
  }
}

மேம்பட்ட சிறந்த நடைமுறைகள்

1. மோனோரெபோ அமைப்பு

மோனோரெபோ கட்டமைப்பைப் பயன்படுத்தும் திட்டங்களுக்கு:

// In your root package.json
{
  "workspaces": ["packages/*"],
  "scripts": {
    "lint": "yarn workspaces run lint",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.0.0",
    "prettier": "^2.5.0",
    "typescript": "^4.5.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ]
  }
}

2. செயல்திறன் மேம்படுத்தல்

பெரிய திட்டங்களுக்கு, ESLint செயல்திறனை மேம்படுத்தவும்:

// .eslintrc.js
module.exports = {
  cache: true, // Enable caching
  cacheLocation: '.eslintcache', // Cache file location
  ignorePatterns: ['**/node_modules/**', '**/dist/**'], // Ignore patterns
  parserOptions: {
    project: './tsconfig.json', // Only for TypeScript
    projectFolderIgnoreList: ['**/node_modules/**']
  }
};

3. குறுக்கு-எடிட்டர் நிலைத்தன்மைக்கான EditorConfig

வெவ்வேறு எடிட்டர்கள் மற்றும் IDEகளில் நிலையான குறியீட்டு பாணிகளை பராமரிக்க ஒரு .editorconfig கோப்பைச் சேர்க்கவும்:

# EditorConfig is awesome: https://EditorConfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{json,yml}]
indent_style = space
indent_size = 2

[*.{cmd,sh}]
indent_style = tab

4. CI/CD ஒருங்கிணைப்பு

உங்கள் CI/CD பைப்லைனில் லிண்டிங் மற்றும் ஃபார்மேட்டிங் சோதனைகளைச் சேர்க்கவும்:

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run lint
      - run: npm run format:check

லிண்டிங் சிறந்த நடைமுறைகள்

ஃபார்மேட்டிங் சிறந்த நடைமுறைகள்

குழு பணிப்பாய்வு

பயிற்சி